<!DOCTYPE html>
<html>
	<header>
		<style>
		
		</style>
		<meta charset="UTF-8"/>
		<title>ELIKO ARENDUSKESKUS OÜ</title>
		<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="lib/slider/css/slider.css" />
		<link rel="stylesheet" href="css/toradex.css" />

		
	</header>
	<body>
		<div class="row-fluid myhead"><!--SHAPKA-->
			<div class="span2"><a href="http://www.eliko.ee"><img src="img/eliko_logo.jpg" width="66%"></a></div>
			<div class="span3">VALI VIDEOFAIL: <input type="file"  id="vidInput" accept="video/*" /></div>
			<div class="span4">VALI SENSORITE ANDMETE FAIL:  <input type="file" id="sensFile" accept=".csv, text/*" name="sensFile" /></div>
			<div class="span3 link"><a href="vordlus.html">VÕRDLE GRAAFIKUID</a></div>
		</div>
		<div class="row-fluid"> <!----------------------- MAIN AREA ------------------------> 
			<div class="row-fluid"> <!-- PROBEL -->
			</div>
			<div class="span5 vid"> <!--  VIDEO HALFSCREEN-->
				<div id="vidError">This file format is not supported!</div>
				<video  id = "video" controls autoplay width="100%">
					Your browser does not support the video tag.-->
				</video>
				<div class= "well butBox span11" id = "tmp1">
					<div class="span6">
						<button  id="toggle" class="btn" onclick ="player.start();"><i class="icon-play"></i></button>
						<button class="btn" onclick ="player.stop();"><i class="icon-stop"></i></button>
						<button class="btn" onclick ="player.seek($('#frames').val(), false)"><i class="icon-backward"></i></button>
						<button class="btn" onclick ="player.seek($('#frames').val(), true)"><i class="icon-forward"></i></button>
					</div>
					<div class= "span1">seek</div>
					<div class= "span2">
						<select id = "frames">
							<option value=1>1</option>
							<option value=2>2</option>
							<option value=3>3</option>
							<option value=5>5</option>
							<option value=10>10</option>
							<option value=15>15</option>
							<option value=25>25</option>
							<option value=50>50</option>
							<option value=75>75</option>
							<option value=100>100</option>
							<option value=250>250</option>
							<option value=500>500</option>
						</select>
					</div>
					<div class= "span1">frames</div>
					<div class = "span10">
						<div class = "span6">current frame [SMPTE]:</div>
						<div class = "span6" id="curFrame" style = "background-color: #888; color: #eee; padding: 4px">0</div>	
					</div>
					
					
				</div>
				<div class="span8 well" id="console" style="background-color: #ddccaa">CONSOLE</div>
				
				
			</div>
			
			<div class="span6 flot"> <!-- GRAPH HALFSCREEN -->
				<div class="row-fluid" id="curveControls">	</div>
				<div class="row-fluid" id = "skaleerimine">
					<div class="span1"></div> <!--OTCTYn-->
					<div class="span7"  onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">
						<i class = "icon-zoom-out icon-mini skal" id = "skalXzOut"></i>
						<i class= "icon-resize-horizontal icon-3x" style="color:#aaa"></i>
						<i class = "icon-zoom-in icon-large skal"  id = "skalXzIn" style="top: 2px"></i>
						<span class = "info">või skrolli</span>
					</div>
					<div class="span1">
						<div class="span6">
							<i class= "icon-zoom-in icon-large skal" id = "skalYzIn"></i><br>
							<i class= "icon-zoom-out icon-mini skal" id="skalYzOut"></i>
						</div>
						<div class="span2" style="color:#aaa">
							<i class = "icon-resize-vertical icon-3x"></i>
						</div>
						
					</div>
					<div class= "span3"><br><span class = "info">või SHIFT + skrolli</span></div>
					
				</div>
				<div class="">
					<div class="span12" id="phd">
						<div id="placeholder" style="width:100%;height:300px;" onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false"></div>
						<div class="span12 subplot" id="subplot">50</div>
						<div id="content" class="span12">
							<div class = "span12 info">Tõmba kõveraid hiirega graafiku liigutamiseks X-teljel, SHIFT'iga - Y-teljel</div> 
							<div id = "nihutamisBox" class="span7 well form-inline lead">
								Graafiku nihutamine <br>
								 <span class="alert alert-info" id="niheSuund" style="cursor: pointer" alt="1" ><i class="icon-backward"></i></span> 
								<input type="text" placeholder="Nihe (ms) ..." id="nihe" class='input-small'> <small>* 10 ms</small>
								
							</div>
							<div class="span4 well lead"> Sensori sagedus:
								<span style="font-weight: bold; color: #3333FF" id='sageBox'>---</span> Hz
							</div>
							<div class="span12" style="border-top: 1px solid #555"> <!--SLIDER-->
								<form id="chooseGraph">
									<div class= "span2">Graaviku viis: </div>
									<div class = "span2" id="koverad"><input type="radio" name="grType" value="lines" onchange="graph.draw()" checked> KÕVERAD</div>
									<div class = "span1"></div>
									<div class = "span2" id="tulbad"><input type="radio" name="grType" value="bars" onchange="graph.draw()" >TULBAD</div>
								</form>			
							 </div>
						</div>
						
					</div>
					
				</div>
				 
			</div>
				
				
				
			
		</div>
		<p>		
		<br>
		
'
	</body>
	
	<script src="lib/jquery.min.js"></script>
		<script src="lib/bootstrap/js/bootstrap.min.js"></script>
		 <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.js"></script>
		 <script language="javascript" type="text/javascript" src="lib/slider/js/bootstrap-slider.js"></script>
		<script src="lib/jquery.csv-0.71.min.js"></script>
		<script src="lib/jquery.json-2.4.min.js"></script>
		<script src="lib/csonv.js"></script>
		<script src="lib/VideoFrame.js"></script>
		<script src="lib/VideoFrame.js"></script>
		<script src="lib/jquery_cookie_1.4.0.js"></script>
		<script src="js/html5video.js"></script>
		<script src="js/player.js"></script>
		<script src="js/graph.js"></script>
		<script src="js/graph_controls.js"></script>
		<script src="js/data.js"></script>
		<script src="js/sensorid.js"></script>
	
</html>